<%@ page import="main.java.com.entity.User" %>
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红灯笼</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        .app-container {
            display: flex;
            height: 100vh;
            background: #f8f8f8;
        }

        /* Header Styles */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 12px 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }

        .restaurant-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .restaurant-logo {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: #ffd700;
        }

        .restaurant-details {
            flex: 1;
        }

        .restaurant-name {
            font-size: 16px;
            font-weight: bold;
        }

        .restaurant-meta {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
        }

        /* Sidebar 样式 */
        .sidebar {
            width: 80px;
            background: white;
            position: fixed;
            top: 64px;
            bottom: 0;
            overflow-y: auto;
        }

        .category-item {
            padding: 16px 0;
            text-align: center;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
        }

        .category-item.active {
            color: #ff6b6b;
            background: #fff5f5;
        }

        /* 主内容区域样式 */
        .main-content {
            flex: 1;
            margin-left: 80px;
            margin-top: 64px;
            padding: 16px;
            overflow-y: auto;
        }

        .food-item {
            display: flex;
            background: white;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .food-image {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            object-fit: cover;
        }

        .food-details {
            flex: 1;
            margin-left: 12px;
        }

        .food-name {
            font-size: 16px;
            font-weight: 500;
        }

        .food-description {
            font-size: 12px;
            color: #666;
            margin: 4px 0;
        }

        .food-price {
            color: #ff6b6b;
            font-size: 14px;
            font-weight: 500;
        }

        .order-button {
            padding: 4px 12px;
            background: #ff6b6b;
            color: white;
            border: none;
            border-radius: 16px;
            font-size: 12px;
            cursor: pointer;
            float: right;
        }

        /* 购物车样式 */
        .cart-counter {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 24px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .total-price {
            font-weight: bold;
        }

        .logout-icon {
            cursor: pointer;
            color: #666;
        }
    </style>
</head>
<body>
<div class="app-container">

    <header class="header">
        <div class="restaurant-info">
            <div class="restaurant-logo">
                <img src="front/image/login-logo.jpg" style="width: 40px;height: 40px"/>
            </div>
            <div class="restaurant-details">
                <div class="restaurant-name">红灯笼</div>
                <div class="restaurant-meta">
                    <span>距离15km</span>
                    <span> · </span>
                    <span>预计45-60分钟</span>
                </div>
            </div>
            <div>
                <span><%
                    List<User> username = (List<User>) session.getAttribute("list");
                    String phone = username.get(0).getPhone();
                    out.println(phone);
                %></span>
                <a href="front/user-profile.jsp"><img src="front/image/user.png" alt="" style="width: 25px;height: 25px"></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="front/login.jsp" class="logout-icon">
                    <i>⭕</i>
                </a>
            </div>
        </div>
    </header>

    <from></from>
    <div class="sidebar">
        <%
            String[] categories = {"湘菜", "川菜", "粤菜", "饮品", "主食", "副食", "辣椒菜", "商务套餐", "儿童套餐"};
            for (String category : categories) {
        %>
        <button class="category-item" onclick="selectCategory(this, '<%= category %>')"><%= category %>
        </button>
        <% } %>
    </div>

    <div class="main-content" id="main-content">
        <!-- 菜品数据将通过AJAX动态加载到这里 -->
    </div>

    <div class="cart-counter">
        <form action="<%=request.getContextPath()%>/orderdetailsfront" method="post">
            <span class="total-price" style="color: #f8f8f8">¥
                <span id="totalPrice" style="color: #f8f8f8">0</span></span>
            <input type="hidden" name="totalPrice2" id="totalPrice2" required>
            <button type="submit" class="order-button" style="margin-left: 10px">去结算</button>
        </form>
    </div>
</div>

<script>
    let total = 0;
    let activeCategory = null;

    /**
     * 将菜品添加到购物车
     * @param {string} itemName - 菜品名称
     * @param {number} price - 菜品价格
     */
    function addToCart(itemName, price) {
        total += parseInt(price);
        document.getElementById('totalPrice').textContent = total;
        alert(`${itemName} 已添加到购物车`);
        document.getElementById('totalPrice2').value = total;
    }

    /**
     * 选择菜品分类
     * @param {HTMLElement} element - 被点击的分类按钮元素
     * @param {string} categoryName - 分类名称
     */
    function selectCategory(element, categoryName) {
        if (activeCategory) {
            activeCategory.classList.remove('active');
        }
        element.classList.add('active');
        activeCategory = element;

        fetchDishesByCategory(categoryName);
    }

    /**
     * 根据分类名称获取菜品数据
     * @param {string} categoryName - 分类名称
     */
    function fetchDishesByCategory(categoryName) {
        const mainContent = document.getElementById('main-content');
        mainContent.innerHTML = ''; // 清空现有内容

        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'FrontDishServlet?categoryName=' + encodeURIComponent(categoryName), true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                mainContent.innerHTML = xhr.responseText;
            }
        };
        xhr.send();
    }

    // 初始化页面状态：默认加载“湘菜”分类，并设置第一个分类按钮为激活状态
    document.querySelector('.category-item').classList.add('active');
    activeCategory = document.querySelector('.category-item');
    fetchDishesByCategory('湘菜'); // 默认加载湘菜
</script>
</body>
</html>